<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <link rel="stylesheet" href="../dist/idangerous.swiper.css">
    <style>
        /* Demo Styles */

        body {
            margin: 0;
            font-size: 13px;
            line-height: 1.5;
        }

        .swiper-container {
            width: 100%;
            height: 400px;
            color: #fff;
            background: #222;
            text-align: center;
        }

        .swiper-slide {
            height: 100%;
            opacity: 1;
            -webkit-transition: -webkit-transform 300ms;
            -moz-transition: transform 300ms;
            -ms-transition: transform 300ms;
            -o-transition: transform 300ms;
            transition: transform 300ms;
            -webkit-transform: scale(0) translateZ(0);
            -moz-transform: scale(0) translateZ(0);
            -ms-transform: scale(0) translateZ(0);
            -o-transform: scale(0) translateZ(0);
            transform: scale(0) translateZ(0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            will-change: transform;
            overflow: hidden;
        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
        }

        .swiper-slide-visible {
            opacity: 1;
            -webkit-transform: scale(0.9) translateZ(0);
            -moz-transform: scale(0.9) translateZ(0);
            -ms-transform: scale(0.9) translateZ(0);
            -o-transform: scale(0.9) translateZ(0);
            transform: scale(0.9) translateZ(0);
        }

        .swiper-slide-active {
            top: 0;
            opacity: 1;
            -webkit-transform: scale(1) translateZ(0);
            -moz-transform: scale(1) translateZ(0);
            -ms-transform: scale(1) translateZ(0);
            -o-transform: scale(1) translateZ(0);
            transform: scale(1) translateZ(0);
        }

        .red-slide {
            background: #ca4040;
        }

        .blue-slide {
            background: #4390ee;
        }

        .orange-slide {
            background: #ff8604;
        }

        .green-slide {
            background: #49a430;
        }

        .pink-slide {
            background: #973e76;
        }

        .swiper-slide .title {
            font-style: italic;
            font-size: 42px;
            margin-top: 80px;
            margin-bottom: 0;
            line-height: 45px;
        }

        .pagination {
            position: absolute;
            z-index: 20;
            left: 0px;
            width: 100%;
            text-align: center;
            bottom: 5px;
        }

        .swiper-pagination-switch {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 8px;
            background: #aaa;
            margin-right: 8px;
            cursor: pointer;
            -webkit-transition: 300ms;
            -moz-transition: 300ms;
            -ms-transition: 300ms;
            -o-transition: 300ms;
            transition: 300ms;
            opacity: 0;
            position: relative;
            top: -50px;
        }

        .swiper-visible-switch {
            opacity: 1;
            top: 0;
            background: #aaa;
        }

        .swiper-active-switch {
            background: #fff;
        }

        .swiper-wrapper {
            will-change: transform;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
    </style>
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide red-slide">
                 <img src="img/bb.jpg" alt="Slide 5">
            </div>
            <div class="swiper-slide blue-slide">
                <img src="img/slider1-1.png" alt="Slide 5">
            </div>
            <div class="swiper-slide orange-slide">
                 <img src="img/slider1-2.png" alt="Slide 5">
            </div>
            <div class="swiper-slide red-slide">
                 <img src="img/bb.jpg" alt="Slide 5">
            </div>
            <div class="swiper-slide blue-slide">
                <img src="img/slider1-1.png" alt="Slide 5">
            </div>
            <div class="swiper-slide orange-slide">
                 <img src="img/slider1-2.png" alt="Slide 5">
            </div>
        </div>
    </div>
    <div class="pagination"></div>
    <script src="js/jquery-1.10.1.min.js"></script>
    <script src="../dist/idangerous.swiper.min.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            pagination: '.pagination',

            paginationClickable: true,
            centeredSlides: true,
            slidesPerView: 1.5,
            watchActiveIndex: true,
            loop: true,
            // 提高克隆数量，避免从克隆切回原滑块时边界短缺
            loopAdditionalSlides: 6,
            // 更稳定的可见性判定，允许“部分可见”侧卡获得可见类
            visibilityFullFit: false,
            // 统一过渡速度，避免因速度不一致造成闪烁
            speed: 3000,
            roundLengths: true,
            // 自动播放每 3 秒切换
            autoplay: 2000,
            // 用户交互后继续自动播放
            autoplayDisableOnInteraction: false
        })
    </script>
</body>

</html>